<template>
  <div class="info" :style="style" ref="thisRef">
    <template v-if="behavior?.includes('resize')">
      <div class="text">
        {{ Math.round(mirror.w) }} <span>x</span>
        {{ Math.round(mirror!.h) }}
      </div>
    </template>
    <template v-else-if="behavior === 'drag'">
      <div class="text">
        {{ Math.round(mirror!.originX) }} x
        {{ Math.round(mirror!.originY) }}
      </div>
    </template>
    <template v-else-if="behavior?.includes('rotation')"> {{ mirror.rotate }}° </template>
  </div>
</template>

<script setup lang="ts">
import { computed, type CSSProperties } from "vue";
import type { HandleType, IDraggable, IRect } from "../core/types";

const props = defineProps<{
  position?: IRect;
  behavior?: HandleType;
  mirror: IDraggable;
  zoom: number;
}>();

const style = computed((): CSSProperties | undefined => {
  const { position, zoom } = props;
  // 提前处理可能的 undefined
  if (!position || !zoom) {
    return undefined;
  }
  // 解构属性并添加类型断言
  const { x, w, y, h } = position as Required<typeof position>;

  return {
    left: `${x}px`,
    top: `${y}px`
  };
});
</script>

<style lang="scss" scoped>
.info {
  position: fixed !important;
  background-color: #0d99ff;
  color: white;
  transform: translateX(-50%);
  padding: 2px 4px;
  font-size: 12px;
  line-height: 16px;
  white-space: nowrap;
  border-radius: 4px;
  user-select: none;
  z-index: 100;
  .text {
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: -0.5px;
    gap: 4px;
  }
}
</style>
